import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { slideAnimation } from './animation';
import { Appstate } from './store';
import { addTodo, deleteTodo } from './store/actions/todo.actions';
import { Todo } from './store/reducers/todo.reducer';
import { selectTodos } from './store/selectors/todo.selectors';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [],
  animations:[slideAnimation]
})
export class AppComponent{
  @ViewChild("AddTodoInput") AddTodoInput!: ElementRef
  todos: Observable<Todo[]>
  constructor(private store: Store<Appstate>){
    this.todos = this.store.pipe(select(selectTodos))
  }

  addTodo(){
    const title = this.AddTodoInput.nativeElement.value;
    if(title !== ''){
      this.store.dispatch(addTodo({title}));
      this.AddTodoInput.nativeElement.value = "";
    }
  }

  deleteTodo(id: string){
    this.store.dispatch(deleteTodo({id}))
  }
}
